<template>
  <div>
    <dl>
      <dt>
        <img :src="`http://47.115.85.237:3000/${list.product_picture}`" />
      </dt>
      <dd>
        <p>{{ list.product_name }}</p>
        <p style="color:#888;">{{ list.product_intro }}</p>
        <p style=" color:goldenrod;">{{ list.product_title }}</p>
        <p>
          <span style=" color:goldenrod; margin-right:20px;">{{ list.product_price }}元</span>
          <span style="color:#888;">{{ list.product_selling_price }}元</span>
        </p>
        <p>
          <el-button  @click="add(list.product_id)">加入购物车</el-button>
          <el-button>喜欢</el-button>
        </p>
      </dd>
    </dl>
  </div>
</template>

<script>
export default {
  name: "",
  // 组件注册
  components: {},
  // 父组件传参
  props: {},
  // 变量声明
  data() {
    return {
      list: [],
    };
  },
  // Vue实例创建完成以后执行 数据可用
  created() {
    this.getadd();
  },
  // Vue模板挂载完毕以后执行  DOM节点加载完毕了（可以获取节点了）
  mounted() {},
  // keepalive 缓存进入执行
  activited() {},
  // vue组件更新完毕以后执行
  update() {},
  // 定义事件
  methods: {
    async getadd() {
      let id = this.$route.params.id;
      console.log(id);
      let res = await this.$axios.post("api/product/getAllProduct", {
        categoryID: [],
        currentPage: 1,
        pageSize: 55,
      });

      let { Product } = res.data;

      this.list = Product.filter((item) => item.product_id == id)[0];

      console.log(this.list);
    },
    // 加入购物车
        async add(id){
      let res = await this.$axios.post('api/user/shoppingCart/addShoppingCart',{"user_id":sessionStorage.getItem("token"),"product_id":id})
      console.log(res)
      let { code,msg } = res.data
      if(code == "001"){
        this.$message.success(msg)
      }else{
        this.$message.error(msg)
      }
}
  },
  // 过滤器
  filter: {},
  // 计算属性
  computed: {},
  // 监听属性
  watch: {},
};
</script>

<style scoped>
dl {
  display: flex;
}
img {
  width: 400px;
}
</style>
